<template>
  <div>
    <a-modal :width="650" title="添加打卡人员" :visible="show" @cancel="cancel" @ok="handleOk">
      <a-layout-content>
        <a-row type="flex">
          <!-- left -->
          <a-col :span="12">
            <!-- 树形选择 -->
            <a-row class="tree-body">
              <custom-tree ref="tree" :data.sync="treeData" />
            </a-row>
          </a-col>
          <!-- right -->
          <a-col :span="10" class="mg_l20 ">
            <a-row class="sub_tit mg_b5">已经选择的部门或成员</a-row>
            <a-row type="flex">
              <a-col v-for="item in deptList" :key="item.depInfoId" :span="12" class="mg_b10">
                <a-icon type="folder" />{{ item.deptName }}
              </a-col>
              <a-col v-for="item in staffList" :key="item.empInfoId" :span="12" class="mg_b10 ">
                <a-icon type="user" /> {{ item.empInfoName }}
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-modal>
  </div>
</template>

<script>
import customTree from "@/views/custom/customTree/tree";
import { Check, Common } from "@/api/check";
export default {
  components: { customTree },
  props: ["show", "userOptions"],
  data() {
    return {
      staIds: [],
      deptIds: [],
      choseList: [],
      /* 部门成员 */
      deptList: [],
      /* 人员成员 */
      staffList: [],
      users: [],
      visible: false,
      treeData: [],
      obj: {},
      value: null,
      emp: [],
      allList: []
    };
  },

  watch: {
    show(val) {
      if (val) {
        this.getSelectDepTree();
        this.deptList = this.userOptions.deptList;
        this.staffList = this.userOptions.staffList;
      }
    }
  },

  mounted() {
    this.$eventBus.$on("custom", () => {
      this.deptList = [];
      this.staffList = [];
      this.deep(this.treeData);
    });
  },
  beforeDestroy() {
    this.$eventBus.$off("custom");
  },

  methods: {
    // 递归
    deep(data, deptList, staffList) {
      data.map(v => {
        if (v.isSelected) {
          if (v.isDept) {
            v.deptId = v.id;
            v.deptName = v.name;
            this.deptList.push(v);
          } else {
            v.depInfoId = v.parentId;
            v.depInfoName = v.parentName;
            v.empInfoId = v.id;
            v.empInfoName = v.name;
            this.staffList.push(v);
          }
        }
        if (v.hasChild) {
          this.deep(v.childList);
        }
      });
      return {
        deptList: this.deptList,
        staffList: this.staffList
      };
    },
    /* 删除选中 */
    delItem(i, arr) {
      arr.splice(i, 1);
    },
    /* 获取部门树 */
    getSelectDepTree() {
      Check({
        url: Common.selectDepInfoTree,
        params: {
          companyId: this.$store.state.hr.companyId,
          type: 1
        }
      }).then(({ data }) => {
        this.handlerChose(data);
        this.treeData = data;
      });
    },
    // 处理选择
    handlerItem(data, item) {
      data.map(v => {
        if (v.id === item.is) {
          v.isSelected = item.isSelected;
        }
        if (v.isDept) {
          this.deptList.push(v);
        } else {
          this.staffList.push(v);
        }
        if (v.hasChild) {
          this.handlerItem(data.childList, item);
        }
      });
      this.staffList = this.staffList.filter(vv => vv.isSelected);
      this.deptList = this.deptList.filter(vv => vv.isSelected);
    },
    // 处理选中状态
    handlerChose(data) {
      this.deptIds = this.userOptions.deptList.map(v => v.deptId);
      this.staIds = this.userOptions.staffList.map(v => v.empInfoId);
      data.forEach(s => {
        if (s.isDept) {
          if (this.deptIds.includes(s.id)) {
            s.isSelected = true;
          }
        } else {
          if (this.staIds.includes(s.id)) {
            s.isSelected = true;
          }
        }
        if (s.hasChild) {
          this.handlerChose(s.childList);
        }
      });
    },
    // cancle
    cancel() {
      this.$emit("update:show", false);
    },

    /* ok */
    handleOk(e) {
      this.$emit("update:show", false);
      this.userOptions.deptList = this.deptList;
      this.userOptions.staffList = this.staffList;
      this.$emit("update:userOptions", this.userOptions);
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  padding: 0;
}
.tree-body {
  height: 400px;
  overflow-y: scroll;
  border-right: 1px solid #f1f1f1;
}
.tree-item {
  padding: 10px 0;
}
</style>
